<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <Menu></Menu>
            </el-header>
            <el-header style="background-color: white;">
                <el-row :gutter="0" class="titleDiv">
                    <el-col :span="3"></el-col>
                    <el-col :span="3"><h2>{{route.query.name}}</h2></el-col>
                    <el-col :span="12"></el-col>
                    <el-col :span="3">
                        <div class="grid-content ep-bg-purple"/>
                        <el-input v-model="pageInfo.search" size="default" placeholder="Type to search"/>
                    </el-col>
                    <el-col :span="1">
                        <el-button type="primary" @click="myPage" size="default">搜索</el-button>
                    </el-col>
                    <el-col :span="2">
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <el-row :gutter="18" style="margin-left: 200px;margin-right: 200px">
                    <el-col :span="6"  v-for="(item) in Courses">
                        <CourseCard  :course="item"></CourseCard><br>
                    </el-col>
                </el-row>
                <div class="pageDiv">
                    <el-pagination background layout="prev, pager, next"
                                   :page-size="pageInfo.pageSize"
                                   :total="totalCount"
                                   @current-change="changePageNum"/>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
    import {useRoute} from 'vue-router'
    import {onMounted, reactive, ref,watch} from "vue";
    import {
        selectOrdinaryCourseWithPage,
        selectVipCourseWithPage,
        selectEngineeringCourseWithPage,
        selectScienceCourseWithPage, selectLiteratureCourseWithPage, selectLawCourseWithPage, selectAllCourseWithPage
    } from "@/api/course";
    import course from "@/store/course";
    import {ElMessage} from "element-plus";
    import {
        selectAllTextsWithPage,
        selectEngineeringTextWithPage, selectLiteratureTextWithPage,
        selectOrdinaryTextsWithPage, selectScienceTextWithPage,
        selectVipTextsWithPage
    } from "@/api/textualmaterial";

    const pageInfo = reactive({pageNum: 1, pageSize: 16, search: ''});
    const totalCount = ref(0);
    const Courses = ref()
    const route = useRoute();

    const selectOrdCourse = () => {
        selectOrdinaryCourseWithPage(pageInfo).then((res) => {
            if (res.data.total>0){
                Courses.value = res.data.list;
                totalCount.value = res.data.total;
            }else {
                Courses.value=[]
            }

        })
    }
    const selectVipCourse=()=>{
        selectVipCourseWithPage(pageInfo).then((res)=>{
            // console.log(res.data);
            if (res.data.total>0){
                Courses.value = res.data.list;
                // console.log(course.value)
                totalCount.value = res.data.total;
            }else {
                Courses.value=[]
                // ElMessage.warning("未检索到相关课程")
            }

        })
    }
    const selectEngineeringCourse = ()=>{
        selectEngineeringCourseWithPage(pageInfo).then((res)=>{
            if (res.data.total>0){
                Courses.value = res.data.list;
                // console.log(course.value)
                totalCount.value = res.data.total;
            }else {
                Courses.value=[]
                // ElMessage.warning("未检索到相关课程")
            }

        })
    }
    const selectScienceCourse = ()=>{
        selectScienceCourseWithPage(pageInfo).then((res)=>{
            if (res.data.total>0){
                Courses.value = res.data.list;
                // console.log(course.value)
                totalCount.value = res.data.total;
            } else {
                Courses.value=[]
                // ElMessage.warning("未检索到相关课程")
            }

        })
    }
    const selectLiteratureCourse=()=>{
        selectLiteratureCourseWithPage(pageInfo).then((res)=>{
            if (res.data.total>0){
                Courses.value = res.data.list;
                // console.log(course.value)
                totalCount.value = res.data.total;
            } else {
                Courses.value=[]
                // ElMessage.warning("未检索到相关课程")
            }

        })
    }
    const selectLawCourse=()=>{
        selectLawCourseWithPage(pageInfo).then((res)=>{
            if (res.data.total>0){
                Courses.value = res.data.list;
                // console.log(course.value)
                totalCount.value = res.data.total;
            } else {
                Courses.value=[]
                // ElMessage.warning("未检索到相关课程")
            }

        })
    }
    const selectAllCourse=()=>{
        selectAllCourseWithPage(pageInfo).then((res)=>{
            if (res.data.total>0){
                Courses.value = res.data.list;
                // console.log(course.value)
                totalCount.value = res.data.total;
            } else {
                Courses.value=[]
                // ElMessage.warning("未检索到相关课程")
            }

        })
    }

    const selectTexts = ()=>{//全部文档
        selectAllTextsWithPage(pageInfo).then((res)=>{
            if (res.data.total>0){
                Courses.value = res.data.list;
                // console.log(course.value)
                totalCount.value = res.data.total;
            } else {
                Courses.value=[]
                // ElMessage.warning("未检索到相关课程")
            }
        })

    }
    const selectOTexts = ()=>{//普通文档
        selectOrdinaryTextsWithPage(pageInfo).then((res)=>{
            if (res.data.total>0){
                Courses.value = res.data.list;
                // console.log(course.value)
                totalCount.value = res.data.total;
            } else {
                Courses.value=[]
                // ElMessage.warning("未检索到相关课程")
            }
        })
    }
    const selectVTexts = ()=>{//精品课程
        selectVipTextsWithPage(pageInfo).then((res)=>{
            if (res.data.total>0){
                Courses.value = res.data.list;
                totalCount.value = res.data.total;
            } else {
                Courses.value=[]
            }
        })
    }
    const selectEngineeringTexts = ()=>{
        selectEngineeringTextWithPage(pageInfo).then((res)=>{
            if (res.data.total>0){
                Courses.value = res.data.list;
                totalCount.value = res.data.total;
            } else {
                Courses.value=[]
            }
        })
    }
    const selectScienceTexts = ()=>{
        selectScienceTextWithPage(pageInfo).then((res)=>{
            if (res.data.total>0){
                Courses.value = res.data.list;
                totalCount.value = res.data.total;
            } else {
                Courses.value=[]
            }
        })
    }
    const selectLiteratureTexts =()=>{
        selectLiteratureTextWithPage(pageInfo).then((res)=>{
            if (res.data.total>0){
                Courses.value = res.data.list;
                totalCount.value = res.data.total;
            } else {
                Courses.value=[]
            }
        })
    }
    const selectLawTexts = ()=>{
        selectLawTextWithPage(pageInfo).then((res)=>{
            if (res.data.total>0){
                Courses.value = res.data.list;
                totalCount.value = res.data.total;
            } else {
                Courses.value=[]
            }
        })
    }
    const myPage = ()=>{
        Courses.value = [];
        if (route.query.name == '普通课程') {
            selectOrdCourse();
            // route.query.name = '普通课程'
        }
        else if(route.query.name == '精品课程'){
            selectVipCourse();
        }
        else if (route.query.name == '工学课程'){
            selectEngineeringCourse();
        }
        else if (route.query.name=='理学课程'){
            selectScienceCourse();
        }
        else if (route.query.name=='文学课程'){
            selectLiteratureCourse();
        }
        else if (route.query.name=='法学课程'){
            selectLawCourse();
        }
        else if (route.query.name=='全部课程'){
            selectAllCourse();
        }
        else if (route.query.name=='普通文本'){
            selectOTexts();
        }
        else if(route.query.name =='精品文本'){
            selectVTexts();
        }
        else if(route.query.name == '全部文本'){
            selectTexts();
        }else if (route.query.name==='工学文本'){
            selectEngineeringTexts();
        }else if (route.query.name==='理学文本'){
            selectScienceTexts();
        }else if (route.query.name==='文学文本'){
            selectLiteratureTexts();
        }else if (route.query.name==='法学文本'){
            selectLawTexts();
        }

    }
    watch(route, (to, from) => {
        if (to.query.refresh) {
            // 处理刷新逻辑，例如重新加载数据

            myPage();
        }
    });
    const changePageNum = (pageNum)=>{
        pageInfo.pageNum = pageNum
        myPage()
    }
    onMounted(() => {
        myPage();
    })


</script>

<style scoped>
    .titleDiv {
        display: flex;
        position: relative;
        box-sizing: border-box;
        flex-direction: row;
        align-items: center;
        height: 100%;
        align-content: center;
    }
    .courseRowDiv{
        margin-left: 100px;
    }
    .pageDiv{
        display: flex;
        justify-content: center
    }
</style>